<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

    <!-- 引入Bootstrap库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 引入bootstrap-table库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.css">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

    <!-- 引入bootstrap-table-tree插件 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/extensions/tree/bootstrap-table-tree.min.js"></script>

</head>

<body>
<style>
    .child-row {
        display: none;
    }
    .toggle-button {
        margin-right: 5px;
    }
</style>

<table>
    <thead>
    <tr>
        <th>列1</th>
        <th>列2</th>
        <th>操作</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td><button class="toggle-button"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <tr class="child-row">
        <td>行1子项1列1</td>
        <td>行1子项1列2</td>
        <td><button class="toggle-button"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <tr class="child-row">
        <td>行1子项2列1</td>
        <td>行1子项2列2</td>
        <td><button class="toggle-button"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td><button class="toggle-button"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <tr class="child-row">
        <td>行2子项1列1</td>
        <td>行2子项1列2</td>
        <td><button class="toggle-button"><i class="fa fa-plus"></i></button></td>
        <td></td>
    </tr>
    <!-- 更多行和子项 -->
    </tbody>
</table>

<script>
    var toggleButtons = document.querySelectorAll('.toggle-button');
    toggleButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var currentRow = this.parentNode.parentNode;
            var nextRow = currentRow.nextElementSibling;
            if (nextRow && nextRow.classList.contains('child-row')) {
                toggleChildRows(nextRow);
            } else {
                var newRow = document.createElement('tr');
                var newCell = document.createElement('td');
                newCell.colSpan = currentRow.children.length - 1;
                newRow.appendChild(newCell);
                currentRow.parentNode.insertBefore(newRow, currentRow.nextSibling);
                toggleChildRows(newRow);
            }
        });
    });

    function toggleChildRows(row) {
        var childRows = getChildRows(row);
        childRows.forEach(function(childRow) {
            if (childRow.style.display === 'none') {
                childRow.style.display = 'table-row';
                childRow.querySelector('.toggle-button').innerHTML = '<i class="fa fa-minus"></i>';
            } else {
                childRow.style.display = 'none';
                childRow.querySelector('.toggle-button').innerHTML = '<i class="fa fa-plus"></i>';
            }
        });
    }

    function getChildRows(row) {
        var childRows = [];
        var currentRow = row;
        while (
            (currentRow = currentRow.nextElementSibling) && currentRow.classList.contains('child-row')) {
            childRows.push(currentRow);
        }
        return childRows;
    }
</script>

</body>
</html>